<template>
  <div class="wrap">
    <up-sticky>
      <div class="search">
        <u-search :action-style="{color: '#1890FF'}" placeholder="请输入银行卡开户行" shape="round" @custom="searchFn" @search="searchFn" />
      </div>
      <div class="tip flex_cen_cen">请使用银行名称+地区名称搜索，例如：中国银行宁波象山蓬莱支行，请搜索：中国银行宁波</div>
    </up-sticky>
    <div :style="{height: 'calc(100vh - 210rpx)'}" class="list_style">
      <PAutoList ref="autoListRef" :init-is-call="false" :params="{Name: searchVal, pageSize: '15'}" :request="getBankList" @list="listFn">
        <div v-for="(item, index) in MemberList" :key="index" class="item" @tap.stop="selectFn(item.lName, item.bankCode, item)">
          <scroll-view :scroll-x="true" style="width: 90%">
            <div v-html="item.bankName" />
          </scroll-view>
          <div class="select_icon">
            <Icon v-show="item.isSelect" name="icon-xuanze" size="48" />
            <Icon v-show="!item.isSelect" name="icon-noxuanze" size="48" />
          </div>
        </div>
      </PAutoList>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { nextTick, ref } from 'vue'
import PAutoList from '@C/PAutoList.vue'
import { onUnload, Router } from '@U/common'
import Icon from '@C/Icon.vue'
import { getBankList } from './request'

// 经常分配员工列表
const MemberList = ref([])
const searchVal: any = ref('')
// 搜索
const autoListRef = ref()
const searchFn = (val: string) => {
  searchVal.value = val
  autoListRef.value.clickGetDataFn()
}

const listFn = (list: any) => {
  MemberList.value = list.map((item: object) => {
    item.isSelect = false
    item.bankName = item.lName.replace(searchVal.value, `<span style="color: #FF8002">${searchVal.value}</span>`)
    return item
  })
}

const selectFn = (name: string, code: string | number, item: object) => {
  item.isSelect = true
  uni.$emit('setBankInfoFn', { bankName: name, bankCode: code })
  nextTick(() => {
    setTimeout(() => Router.back(1))
  })
}
onUnload(() => {
  uni.$off('setBankInfoFn')
})
</script>

<style lang="less" scoped>
.wrap {
  .search {
    height: 100rpx;
    background: #fff;
    padding:0 26rpx 20rpx;
  }
  .tip {
    height: 110rpx;
    font-size: 28rpx;
    color: #595959;
    line-height: 40rpx;
    padding: 0 26rpx;
    background: rgba(24,144,255,0.1);
  }
  .list_style {
    width: 88%;
    margin: 0 auto;
    .item {
      position: relative;
      width: 100%;
      height: 96rpx;
      line-height: 96rpx;
      color: rgba(0, 0, 0, .65);
      font-size: 14px;
      border-bottom: 1px solid rgba(0, 0, 0, .15);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      .select_icon {
        position: absolute;
        top: 16rpx;
        right: 0;
      }
    }
  }
}
</style>
